<template>
	<view>
		<button v-if="isShowBtn" class="iconfont icon-jiahao" @click="addAddress">添加地址</button>
	</view>
	<view v-if="!isShowBtn" class="consignee" @click="addAddress">
		<view class="consignee_top clear">
			<view class="consignee_top_username left">
				收货人：{{consignee.userName}}
			</view>
			<view class="consignee_top_tel right">
				{{consignee.telNumber}}
			</view>
		</view>
		<view class="consignee_bottom clear">
			<view class="iconfont icon-dingwei left"></view>
			<view class="consignee_bottom_address left">
				{{consignee.provinceName + consignee.cityName + consignee.countyName + consignee.detailInfo}}
			</view>
			<view class="iconfont icon-youjiantou_huaban consignee_bottom_iconR right"></view>
		</view>
	</view>
	<view class="division"></view>
	<view class="order">
		<view class="order-product">
			<image class="order-product_img" :src="order.imgSrc" style="height: 180rpx;"></image>
			<view class="order-product_info" v-if="order.payType==1">
				<view class="order-product_info_name">{{order.shopname}}</view>
				<view class="order-product_price">{{order.allPionts}}积分</view>
			</view>
			<view class="order-product_info" v-if="order.payType==2">
				<view class="order-product_info_name">{{order.shopname}}</view>
				<view class="order-product_price">{{order.piont}}积分+{{order.money}}元</view>
			</view>
		</view>
		<view class="order_item">
			<view>运费</view>
			<view>{{freight}}</view>
		</view>
		<view class="order_item">
			<view class="">数量</view>
			<view class="">
				<uni-number-box v-model="order.count" min="1"></uni-number-box>
			</view>
		</view>
		<view class="order_item">
			<view class="">优惠券</view>
			<view class="">请选择<text class="iconfont icon-youjiantou_huaban"></text></view>
		</view>
		<view class="order_item">
			<view class="">积分</view>
			<view class="order-product_price" v-if="order.payType==1">{{allPiontTotal}}</view>
			<view class="order-product_price" v-if="order.payType==2">{{piontTotal}}</view>
		</view>
		
	</view>
	<view class="bottom">
		<view class="bottom_price">
			<text>合计金额</text>
			<text class="bottom_price_num" v-if="order.payType==1">￥ 0 元</text>
			<text class="bottom_price_num" v-if="order.payType==2">￥{{moneyTotal}}元</text>
		</view>
		<view class="bottom_btn" @click="dialogToggle('info')">
			提交订单
		</view>
	</view>
	<view>
		<!-- 兑换提示窗 -->
		<uni-popup ref="Dialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="通知" :content="'确定花费'+a+'积分兑换商品吗？'" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import store from '@/store/index.ts'; //需要引入store
	export default{
		data(){
			return{
				test:'',
				consignee: {},
				isShowBtn: true,
				order: {
					id:'',
					imgSrc:'',
					shopname:'',
					allPionts:'',
					point:'',
					money:'',
					count:'',
					
				},
				freight: '顺丰包邮',
				msgType: 'info',
				a:0
			}
		},
		onLoad: function (option) {
			const item = JSON.parse(decodeURIComponent(option.data));
			console.log(item.id,item.count)
			this.order={...item};
			if (store.state.placeOrder.consignee.userName) {
				this.consignee = store.state.placeOrder.consignee
				this.isShowBtn = false
			}
		},
		computed:{
			allPiontTotal(){
				this.a = this.order.allPionts*this.order.count
				return this.order.allPionts*this.order.count;
			},
			piontTotal(){
				this.a = this.order.piont*this.order.count
				return this.order.piont*this.order.count;
				},
			moneyTotal(){
				return this.order.money*this.order.count;
			},
			
		},
		methods:{
			addAddress() {
				let that = this
				uni.chooseAddress({
					success(res) {
						that.consignee = res
						that.isShowBtn = false
						store.dispatch('setConsignee', res)
					},
					fail(err) {
						throw err
					}
				})
			},
			
			dialogToggle(type) {
				this.msgType = type
				this.$refs.Dialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				this.$refs.Dialog.open();
				uni.navigateTo({
					url:"/uni_modules/shop-purchaseSucceeded/components/shop-purchaseSucceeded/shop-purchaseSucceeded?id=1"
				})
			},
			
			dialogClose() {
				console.log('点击关闭')
			},
		},
		
	}
</script>

<style scoped>
	.consignee{
		padding: 0 30rpx;
		line-height: 40px;
	}
	.icon-dingwei{
		color: #8dc7f8;
	}
	.consignee_bottom_address{
		color: #999999;
	}
	.consignee_top_tel{
		color: #545454;
	}
	.division{
		background-color: #f2f2f2;
		height: 40rpx;
	}
	.order-product {
		/* margin-top: 20px; */
		padding: 20px 10px;
		/* border-top: 1px solid #cdcdcd; */
		border-bottom: 1px solid #cdcdcd;
		display: flex;
	}
	
	.order-product_img {
		width: 100px;
	}
	
	.order-product_info {
		height: 100px;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.order-product_info_name {}
	
	
	.order-product_price {
		color: #F5B43E;
		font-weight: 800;
	}
	
	.order_item {
		padding: 10px;
		border-bottom: 1px solid #cdcdcd;
		display: flex;
		justify-content: space-between;
	}
	
	.order_last {
		padding: 10px;
		border-bottom: 1px solid #cdcdcd;
		display: flex;
		justify-content: flex-end;
	}
	
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border: 1px solid #e8e8e8;
	}
	
	.bottom_btn {
		width: 33.333333%;
		background-color: #F5B43E;
		color: white;
	}
	
	.bottom_price_num {
		font-weight: 800;
		color: #F5B43E;
		margin: 0 10px;
	}
</style>
